<template>
  <view class="c">
    <view class="content">
      <!-- avatar -->
      <view
        style="
          width: 66px;
          height: 66px;
          border-radius: 50%;
          position: relative;
          top: -33px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
        "
      >
        <image
          :src="userInfo.AvatarUrl || '/static/images/my/missing-face.png'"
          style="
            background-color: #fff;
            width: 60px;
            height: 60px;
            border-radius: 50%;
          "
        />
      </view>
      <view style="text-align: center; margin: 18px; margin-top: -18px">{{
        userInfo.NickName
      }}</view>
      <view class="canvas">
        <canvas canvas-id="barcode" @tap="onBarC"></canvas>
        <canvas class="qr" canvas-id="qrcode" @tap="onQRC"></canvas>
      </view>
    </view>
    <lee-popup :show="show" @close="onC" @open="onO">
      <view
        v-if="type == 1"
        style="width: 80vh; height: 15vh; position: relative"
      >
        <canvas
          canvas-id="barcode1"
          style="
            transform: rotate(90deg);
            width: 800rpx;
            height: 300rpx;
            background-color: #fff;
            position: absolute;
            top: 400rpx;
            left: 0rpx;
          "
        ></canvas>
      </view>
      <canvas
        style="width: 600rpx; height: 600rpx; margin-top: 60px"
        canvas-id="qrcode1"
        v-if="type == 2"
      ></canvas>
    </lee-popup>
  </view>
</template>

<script>
import { uGetStorageSync, uNavigateTo } from "../../utils/uniUtils";
import { barcode, qrcode } from "../../utils/canvas/index";

export default {
  data() {
    return {
      coverTransform: "translateY(0px)",
      coverTransition: "0s",
      moving: false,
      member: "", //会员信息
      // couponNumber: '',//优惠劵数量
      id: 0,
      BJimg: "",
      scrollHeight: 0,
      timer: null,
      show: false,
      type: 1,
      userInfo: null,
    };
  },
  onShow(options) {
    let id = uni.getStorageSync("LoginID") || 0; //登录状态码
    this.id = id;
    if (id == 0) {
    } else {
      this.userInfo = uGetStorageSync("userInfo");
      let MemberCard = uni.getStorageSync("Members");
      this.member = MemberCard;
      barcode("barcode", MemberCard[0].Number, 580, 480);
      qrcode("qrcode", MemberCard[0].Number, 580, 580);
    }
  },
  methods: {
    onC() {
      this.show = false;
    },
    onO() {
      this.show = !false;
    },
    onBarC() {
      this.type = 1;
      this.show = !false;
      let MemberCard = uni.getStorageSync("Members");
      barcode("barcode1", MemberCard[0].Number, 800, 300);
    },
    onQRC() {
      this.type = 1 + 1;
      this.show = !false;
      let MemberCard = uni.getStorageSync("Members");
      qrcode("qrcode1", MemberCard[0].Number, 600, 600);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../static/css/li_mixins.scss";
.c {
  background-color: $li-primary-color;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  &ontent {
    height: 75vh;
    width: 95%;
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

canvas {
  width: 600rpx;
  height: 150rpx;
  background-color: #fff;
  margin: auto;
  &.qr {
    height: 500rpx;
  }
}
</style>
